<template>
	<div id="drop">
		<!--使用自定义组件-->
		<my-header my-title="记点滴"></my-header>
		<div class="v-main">
			<div class="v-main-title">
				<router-link to="/drop/scene">
					<img src="../../../static/img/drop/4 balloon decoration.png"/>
				</router-link>
				<span class="v-datetime">
					{{a | data}}
				</span>
			</div>
			<div class="v-main-content">
				<textarea></textarea>
			</div>
			<div class="v-main-footer">
				<div class="v-footer-left">
					<div class="v-item v-camera"></div>
					<div class="v-item v-voice"></div>
					<div class="v-item v-place"></div>
					<div class="v-item v-people"></div>
				</div>
				<div class="v-footer-right">
					<div class="v-item v-love"></div>
					<div class="v-item v-tip"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	
	export default{
		name:"drop",
		data(){
			return{
				a: Date.now()
			}
		},		
		filters:{
			data:function (input) {
    			var d = new Date(input);
    			var year = d.getFullYear();
   	 			var month = d.getMonth() + 1;
    			var day = d.getDate() <10 ? '0' + d.getDate() : '' + d.getDate();
    			var hour = d.getHours();
    			var minutes = d.getMinutes();
    			var seconds = d.getSeconds();
    			return year+ '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
    		}
		}		
	}
</script>

<style lang="scss">
	#drop{
		text-align: left;
		.v-header{
			height:auto;
			background: rgb(86,171,255);			
			color:white;
			font-weight:bold;
			padding:20px;					
			img{
				display: inline-block;
				width:30px;
				height:30px;				
				vertical-align: bottom;
				&:hover{
					cursor: pointer;
				}				
			}
			.v-word{
				display: inline-block;
				font-size:2.6rem;
				text-align: center;
				width:140px;
				height:40px;
				line-height:40px;
				margin-left: calc((100% - 200px)/2);							
			}
			.v-save{
				display: inline-block;
				position: absolute;
				right:0;
				width:60px;
				height:40px;
				line-height:40px;
				font-size:1.8rem;
				&:hover{
					cursor: pointer;
				}
			}
		}
		.v-main{
			.v-main-title{
				height:auto;
				img{
					display: inline-block;
					width:50px;
					height:50px;
					vertical-align: bottom;
					margin:20px 30px;
					&:hover{
						cursor: pointer;
					}
				}
				.v-datetime{
					font-size:2rem;
					position: absolute;
					margin-top: 29px;
					padding:10px;
					border: 1px dashed #eee;
				}
			}
			.v-main-content{
				height:600px;	
				textarea{
					padding:20px;
					text-indent: 30px;
					width:100%;
					height:100%;
					font-size:3rem;
					border:0;
					overflow: auto;
					outline: none;
					resize: none;	
					/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
					&::-webkit-scrollbar{						
    					width: 10px;
   						height: 10px;
    					background-color: #F5F5F5;
					}
					/*定义滚动条轨道 内阴影+圆角*/
					&::-webkit-scrollbar-track{
    					-webkit-box-shadow: inset 0 0 6px rgba(122,122,122,0.3);
    					border-radius: 10px;
    					background-color: #F5F5F5;
					} 
					/*定义滑块 内阴影+圆角*/
					&::-webkit-scrollbar-thumb{
    					border-radius: 10px;
    					-webkit-box-shadow: inset 0 0 6px rgba(122,122,122,.3);
   	 					background-color: #555;
					}				
				}
				
			}
		}
	}
</style>